import React, { useEffect, useState } from 'react';
import Cookies from 'js-cookie';
import { connect } from 'dva';
import { getCodeImg } from '@/api/login';
import { encrypt, decrypt } from '@/utils/jsencrypt';
import { Form, Input, Button, Card, Checkbox } from 'antd';
import {
  UserOutlined,
  LockOutlined,
  EyeInvisibleOutlined,
  EyeTwoTone,
  InsuranceOutlined,
} from '@ant-design/icons';

import styles from './index.less';

const Login = ({ dispatch, logins }) => {
  const [codeUrl, setCodeUrl] = useState(''); //数字验证码链接

  useEffect(() => {
    getCode();
  }, []);

  const getCode = () => {
    getCodeImg().then((res: { img: string; uuid: any }) => {
      setCodeUrl('data:image/gif;base64,' + res.img);
      dispatch({
        type: 'logins/saveUuid',
        payload: res.uuid || '',
      });
    });
  };
  const onChangeRememberMe = e => {
    //是否记住密码
    dispatch({
      type: 'logins/saveChangeRememberMe',
      payload: e.target.checked,
    });
  };
  const getCookie = () => {
    dispatch({
      type: 'logins/saveGetcookie',
    });
  };

  const handleLogin = (values: any) => {
    //点击登陆
    if (logins.rememberMe) {
      //记住密码
      Cookies.set('username', values.username, { expires: 9999999 });
      Cookies.set('password', encrypt(values.password), { expires: 9999999 });
      Cookies.set('rememberMe', 'true', { expires: 9999999 });
    } else {
      Cookies.remove('username');
      Cookies.remove('password');
      Cookies.remove('rememberMe');
    }

    values.uuid = logins.uuid;
    dispatch({
      type: 'logins/updateLoginForm',
      payload: values,
    });
  };
  return (
    <div className="loginbox">
      <Card title="若依后台管理系统" style={{ width: 400 }}>
        <Form
          name="normal_login"
          className={styles.loginform}
          initialValues={{ remember: true }}
          onFinish={handleLogin}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '用户名不能为空' }]}
          >
            <Input
              size="large"
              allowClear={true}
              prefix={<UserOutlined />}
              placeholder="账号"
            />
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '密码不能为空' }]}
          >
            <Input.Password
              size="large"
              prefix={<LockOutlined />}
              type="password"
              placeholder="密码"
              iconRender={visible =>
                visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
              }
              allowClear={true}
            />
          </Form.Item>

          <Form.Item>
            <Form.Item
              name="code"
              rules={[{ required: true, message: '验证码不能为空' }]}
              noStyle
            >
              <Input
                size="large"
                prefix={<InsuranceOutlined />}
                type="code"
                placeholder="验证码"
                style={{ width: '65%' }}
                allowClear={true}
              />
            </Form.Item>
            <img src={codeUrl} onClick={getCode} className="login-code-img" />
          </Form.Item>

          <Form.Item>
            <Form.Item valuePropName="checked" noStyle>
              <Checkbox onChange={onChangeRememberMe}>记住密码</Checkbox>
            </Form.Item>
          </Form.Item>
          <Form.Item>
            <Button
              type="primary"
              htmlType="submit"
              className={styles.loginformbutton}
            >
              登录
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

const mapStateToProps = ({ logins }) => {
  return {
    logins,
  };
};

export default connect(mapStateToProps)(Login);
